<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>获取手机号</title>
    <script src="/vue.js"></script>
    <link rel="stylesheet" href="/element.css">
    <script src="/element.js"></script>
    <script src="/axios.min.js"></script>


</head>

<body>
    <div id="app">


        <el-tabs type="border-card">
            <el-tab-pane label="天眼查">

                <el-form :model="ruleForm2" :rules="rules2" ref="ruleForm2" label-width="200px" label-position="top">

                    <el-form-item label="天眼查" prop="tyc">

                        <el-input placeholder="请输入公司名称、老板姓名、品牌名称等" v-model="ruleForm2.tyc" clearable
                            @keyup.enter="submitForm2('ruleForm')">
                            <el-button slot="append" icon="el-icon-search" @click="submitForm2('ruleForm2')">
                            </el-button>
                            </el-button>
                        </el-input>

                    </el-form-item>
                </el-form>
                <el-button type="primary" @click="gotologin">去登录</el-button> <span
                    style="font-size: 14px;color:#909399">打开不了请刷新页面</span>
                <el-button @click="DateFilter" type="warning" style="    float: right;" v-if="tableData.length>0"
                    :loading="loadingDaochu">导出数据</el-button>

                <el-table :data="tableData" style="width: 100%" height="67vh" v-loading="loadingTYC">
                    <el-table-column type="index" width="50">
                    </el-table-column>
                    <el-table-column prop="name" label="公司名称">
                    </el-table-column>
                    <el-table-column prop="phone" label="手机号">
                    </el-table-column>
                    <el-table-column prop="firstPositionValue" label="法人姓名">

                    </el-table-column>
                </el-table>



                <div style="float: right;margin-top: 10px;">
                    <el-pagination background layout="total,prev, pager, next,jumper" :page-size="100"
                        @current-change="currentchange" :page-count="pagecount">
                    </el-pagination>
                </div>



            </el-tab-pane>



            <el-tab-pane label="获取手机号">

                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="200px" label-position="top">
                    <!-- <el-form-item label="Chrome浏览器安装路径  如：C:\Program Files\Google\Chrome\Application\chrome.exe"
                        prop="path">
    
                        <el-input placeholder="请输入路径" v-model="ruleForm.path" :disabled="disabled">
                            <el-button slot="append" @click="savePath(1)" v-if="disabled">编辑</el-button>
                            <el-button slot="append" @click="savePath(2)" v-if="!disabled">保存</el-button>
                        </el-input>
    
                    </el-form-item> -->

                    <el-form-item label="地址" prop="input3">
                        <el-input placeholder="请输入获取手机号地址" v-model="ruleForm.input3" clearable
                            @keyup.enter="submitForm('ruleForm')">
                            <el-button slot="append" icon="el-icon-search" @click="submitForm('ruleForm')"
                                :loading="loading"></el-button>
                        </el-input>

                    </el-form-item>

                </el-form>








            </el-tab-pane>


        </el-tabs>
        <!-- <div class="content">


          
        </div> -->
    </div>
    <script>

        new Vue({
            el: '#app',
            data: {
                loading: false,
                loadingTYC: false,
                loadingDaochu: false,
                disabled: false,
                ruleForm: {
                    path: "",
                    input3: "",//https://www.jihaoba.com/shouji/
                },
                ruleForm2: {
                    tyc: ""
                },
                fileList: [],
                rules: {
                    // path: [{ required: true, message: '请输入路径', trigger: 'blur' }],
                    input3: [
                        { required: true, message: '请输入获取手机号地址', trigger: 'blur' }
                    ],
                },
                rules2: {
                    tyc: [
                        { required: true, message: '请输入公司名称、老板姓名、品牌名称等', trigger: 'blur' }
                    ],
                },
                tableData: [],
                pagecount: 0,
                pageSize: 100,
                pageNum: 1,


            },
            created() {
                let that = this
                // axios({
                //     method: 'get',
                //     url: `http://127.0.0.1:12580/getPath`,
                // }).then(function (response) {

                //     if (response.data.code == 200) {
                //         that.ruleForm.path = response.data.data.url;

                //         if (response.data.data.url) {
                //             that.disabled = true
                //         }

                //     }

                // }).catch(err => {
                //     that.$message.error('请求异常');

                // })
            },
            methods: {
                submitForm(formName) {
                    let that = this
                    // delete that.rules.tyc
                    // that.rules.input3 = [
                    //     { required: true, message: '请输入获取手机号地址', trigger: 'blur' }
                    // ]
                    this.$refs[formName].validate((valid) => {
                        if (valid) {
                            this.loading = true
                            axios({
                                method: 'get',
                                url: `http://127.0.0.1:12580/getPhone?url=${this.ruleForm.input3}`,
                            }).then(function (response) {

                                if (response.data.code == 200) {
                                    that.$message({
                                        message: '成功',
                                        type: 'success'
                                    });
                                    that.loading = false;
                                    that.ruleForm.input3 = ""
                                } else {
                                    that.$message.error(response.data.msg);
                                    that.loading = false;

                                }
                            }).catch(err => {
                                that.$message.error('请求异常');
                                that.loading = false;
                            })
                        }

                    })

                },
                savePath(index) {
                    let that = this
                    if (index == 1) {
                        that.disabled = false
                    } else {


                        axios({
                            method: 'post',
                            url: `http://127.0.0.1:12580/savePath`,
                            data: {
                                url: this.ruleForm.path
                            }
                        }).then(function (response) {

                            if (response.data.code == 200) {
                                that.$message({
                                    message: '保存成功',
                                    type: 'success'
                                });
                                that.disabled = true
                            } else {
                                that.$message.error(response.data.msg);


                            }
                        }).catch(err => {
                            that.$message.error('请求异常');

                        })
                    }
                },
                currentchange(e) {

                    this.pageNum = e
                    console.log(e);
                    this.request2()
                },
                request2() {
                    let that = this
                    that.loadingTYC = true
                    axios({
                        method: 'post',
                        url: `http://127.0.0.1:12580/tianyan`,
                        data: {
                            name: that.ruleForm2.tyc,
                            pageSize: that.pageSize,
                            pageNum: that.pageNum,
                        },
                    }).then(function (response) {
                        if (response.data.code == 200) {
                            // that.$message({
                            //     message: '成功',
                            //     type: 'success'
                            // });
                            // that.ruleForm2.tyc = ""
                            that.loadingTYC = false
                            that.tableData = response.data.data.data
                            that.total = response.data.data.total
                            that.pagecount = response.data.data.companyTotalPage
                        } else {
                            that.$message.error(response.data.msg);
                            that.loadingTYC = false
                            that.tableData = []
                        }
                    }).catch(err => {
                        that.$message.error('请求异常');
                        that.loadingTYC = false
                        that.tableData = []
                    })
                },
                submitForm2(formName) {
                    let that = this

                    // that.rules.tyc = [
                    //     { required: true, message: '请输入公司名称、老板姓名、品牌名称等', trigger: 'blur' }
                    // ]
                    // delete that.rules.input3
                    this.$refs[formName].validate((valid) => {
                        if (valid) {
                            console.log("通过");
                            that.pageNum = 1
                            that.pagecount = 0
                            that.request2()
                        }

                    })
                },
                gotologin() {
                    let that = this

                    axios({
                        method: 'get',
                        url: `http://127.0.0.1:12580/tianyan/login`,

                    }).then(function (response) {
                        if (response.data.code == 200) {
                            that.$message({
                                message: response.data.msg,
                                type: 'success'
                            });

                        } else {
                            that.$message.error(response.data.msg);

                        }

                    }).catch(err => {
                        that.$message.error('请求异常');


                    })
                },
                DateFilter() {
                    let that = this
                    that.loadingDaochu = true
                    axios({
                        method: 'post',
                        url: `http://127.0.0.1:12580/tianyan/daochu`,
                        data: {
                            name: that.ruleForm2.tyc,
                            pageSize: that.pageSize,
                            pageNum: that.pageNum,
                        },
                    }).then(function (response) {
                        if (response.data.code == 200) {
                            that.$message({
                                message: '导出成功',
                                type: 'success'
                            });
                            // that.ruleForm2.tyc = ""

                        }
                        that.loadingDaochu = false
                    }).catch(err => {
                        that.$message.error('请求异常');
                        that.loadingDaochu = false
                    })
                }
            }
        })

    </script>
    <style>
        .content {
            -webkit-transform: translate(-50%, -50%);
            -moz-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
            position: absolute;
            top: 50%;
            left: 50%;
            width: 90%;

        }

        .el-tabs--border-card {
            height: 95vh;
        }
    </style>
</body>

</html>